<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>自动卖币</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            background-color: #F8F8F8;
            font-size: 0.26rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang SC;
            color: #333333;
        }

        .showImg,
        .showchooseList {
            width: 100%;
            height: auto;
            padding: 0.2rem 0.3rem;
            box-sizing: border-box;
        }

        .showTips,
        .listnum {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start
        }

        .machineDeatail {
            flex: 1;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        .showTips li {
            width: 100%;
            font-size: 0.22rem;
            font-weight: 500;
            color: #999999;
            margin-bottom: 0.1rem;
        }

        .listnum {
            padding-bottom: 0.8rem;
        }

        .listnum>li {
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 0.1rem;
            margin-bottom: 0.2rem;
        }

        .aui-switch {
            width: 0.8rem;
            height: 0.38rem;
            position: relative;
            vertical-align: top;
            border: 1px solid #dddddd;
            background-color: #dddddd;
            border-radius: 0.38rem;
            background-clip: content-box;
            display: inline-block;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .aui-switch:before {
            width: 0.38rem;
            height: 0.38rem;
            position: absolute;
            top: -0.02rem;
            left: -0.02rem;
            border-radius: 0.5rem;
            background-color: #fff;
            content: "";
            -webkit-transition: left 0.2s;
            transition: left 0.2s;
        }

        .aui-switch:checked {
            border-color: #ffd203;
            background-color: #ffd203;
        }

        .aui-switch:checked:before {
            left: 0.42rem;
        }

        .listnum>li {
            width: 100%;
            height: 1.92rem;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
            justify-content: space-between;
            padding: 0 0.22rem;
            box-sizing: border-box;
        }

        .showcheckbox {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.2rem;
        }

        .machineDeatail li {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.24rem;
            font-weight: 500;
            color: #999999;
        }

        .machineDeatail li:first-of-type {
            font-size: 0.28rem;
            font-weight: 400;
            color: #262626;
            margin-bottom: 0.1rem;
        }

        .machineDeatail li:last-of-type {
            margin-top: 0.06rem;
        }

        .machineDeatail li p span:last-of-type {
            color: #595959;
        }

        .machineDeatail li:not(:first-of-type) p {
            width: 50%;
        }

        .moneyNum {
            color: #FF7729;
        }

        .submitbox {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1rem;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
            justify-content: space-between;
            background-color: #fff;
        }

        button {
            outline: none;
            border: none;
            width: 2.8rem;
            line-height: 1rem;
            text-align: center;
            background-color: #ffd203;
        }

        .showclick {
            flex: 1;
            display: flex;
            display: -webkit-flex;
            align-self: center;
            justify-content: flex-start;
            margin-left: 0.3rem;
            font-size: 0.24rem;
            color: #262626;
        }

        .titleName {
            flex: 1;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        #listState {
            width: 100%;
            font-size: 0.25rem;
            text-align: center;
            color: #999999;
            padding: 10px 0;
            margin-top: 0.5rem;
        }
        .showTips{
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="showImg">
        <ul class="showTips">
            <li>
                1.仅购买算力宝的合约包可开启/关闭自动卖币
            </li>
            <li>
                2.达到保障率，产出将自动卖为USDT，发放至BHPAY
            </li>
            <li>
                3.已达成保障率的合约不能开启自动卖币
            </li>
        </ul>
    </div>
    <div class="showchooseList">
        <ul class="listnum">
            <!-- <li>
                <div class="showcheckbox">
                    <input type="checkbox" class="aui-switch" />
                </div>
                <ul class="machineDeatail">
                    <li>
                        <p class="titleName">
                            BTC 包电180天合约包包电180天合约包
                        </p>
                        <p class="moneyNum">
                            1500 CNY
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>
                                BTC总算力:
                            </span>
                            <span>
                                15.00 T
                            </span>
                        </p>
                        <p>
                            <span>
                                BHP参配算力:
                            </span>
                            <span>
                                15.00 T
                            </span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <span>
                                产币天数:
                            </span>
                            <span>
                                58天
                            </span>
                        </p>
                        <p>
                            <span>
                                当前回本率:
                            </span>
                            <span>
                                58%
                            </span>
                        </p>
                    </li>
                </ul>
            </li> -->
        </ul>
        <div class="showTips" >
            <img src="../../image/asjalsdhd.png" class="showImgnew" style="width: 1.77rem;margin-bottom: 0.1rem;margin-top: 1.3rem;display: none;">
            <div id="listState" style="text-align: center;margin: auto;color: #666666;"></div>
        </div>
    </div>
    <div class="submitbox">
        <div class="showclick">
            <span style="display: flex;display: -webkit-flex;align-items: center;">
                全部开启
            </span>
            <input type="checkbox" class="aui-switch" id="openAlllist" />
        </div>
        <button class="submitlist">
            确认
        </button>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var total_page = 0;
        var currentPage = 1;
        var submitIdArr = [];//选中订单ID
        var canleArr = [];//取消订单
        var totalNum = 0;
        function changeArr(params) {
            submitIdArr.length = 0, canleArr.length = 0;
            $(".listnum input").each(function (params) {
                var curinput = $(this).is(':checked');
                if (curinput) {
                    submitIdArr.push($(this).attr('data-orderId'));
                } else {
                    canleArr.push($(this).attr('data-orderId'));
                }
            })
            if (submitIdArr.length == totalNum && submitIdArr.length > 0) {
                $("#openAlllist").prop("checked", true);
            } else {
                $("#openAlllist").prop("checked", false);
            }
        }
        //购买算力以及奖励算力接口
        function loadPage(currentPage, account) {
            app.ajaxPro({
                url: "order/auto-mb-lists",
                values: {
                    token: account.token
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    // total_page = ret.data.totalPage;
                    totalNum = ret.data.lists.length;
                    var temp = doT.template($("#ul_list").text());
                    $(".listnum").html(temp(ret.data.lists));
                    changeArr();
                    $("#listState").text("没有更多了");
                }
                if (ret.code == 715) {
                    $(".showImgnew").show()
                    $("#listState").text("暂无可进行自动卖币的合约");
                }else{
                    $(".showImgnew").hide()
                }
            })
        };
        loadPage(currentPage, account);
        $(".listnum").on("change", "li input", function () {
            changeArr();
        });
        $("#openAlllist").on("change", function () {
            var thisValue = $(this).is(":checked");
            if (thisValue) {
                $(".listnum input").prop("checked", true);
            } else {
                $(".listnum input").prop("checked", false);
            }
            changeArr();
        })
        $(".submitlist").click(function () {
            changeArr();
            if (submitIdArr.length == 0 && canleArr.length == 0) {
                app.toast("请选择订单");
                return
            }
            if (submitIdArr.length == totalNum || canleArr.length == totalNum) {
                app.ajaxPro({
                    url: "order/batch-switch-on",
                    values: {
                        token: account.token,
                        is_auto_mb: $("#openAlllist").is(":checked") ? 1 : 0
                    },
                    openFlower: true
                }, function (ret) {
                    if (ret.code == 200) {
                        app.toast("设置成功");
                        setTimeout(function (params) {
                            app.closeW();
                        }, 1500)
                    } else {
                        app.toast(ret.message)
                    }
                })
                return
            }
            app.ajaxPro({
                url: "order/switch-on",
                values: {
                    token: account.token,
                    on_order_str: submitIdArr.join(','),
                    off_order_str: canleArr.join(',')
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    app.toast("设置成功");
                    setTimeout(function (params) {
                        app.closeW();
                    }, 1500)
                } else {
                    app.toast(ret.message)
                }
            })
        })
        app.headerMap();
    }
</script>
<script type="text/html" id="ul_list">
    {{~it:it:index}}
    <li>
        <div class="showcheckbox">
            <input type="checkbox" class="aui-switch listId{{=index}}" data-orderId={{=it.order_id}} {{?it.is_switch_on==1}} checked {{?}} />
        </div>
        <ul class="machineDeatail">
            <li>
                <p class="titleName">
                    {{=it.name}}
                </p>
                <p class="moneyNum">
                    {{=it.total_deposit}} {{=it.currency_code}}
                </p>
            </li>
            <li>
                <p>
                    <span>
                        BTC总算力:
                    </span>
                    <span>
                        {{=it.total_power}} T
                    </span>
                </p>
                <p>
                    <span>
                        BHP参配算力:
                    </span>
                    <span>
                        {{=it.bhp_power}} T
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>
                        产币天数:
                    </span>
                    <span>
                        {{=it.to_now}}天
                    </span>
                </p>
                <p>
                    <span>
                        当前回本率:
                    </span>
                    <span>
                        {{=it.income_rate}}%
                    </span>
                </p>
            </li>
        </ul>
    </li>
    {{~}}
</script>

</html>